var ec_left1 = echarts.init(document.getElementById("l1"),'my');
option_left1 = {
	tooltip:{
		trigger:"axis",
	},
	dataZoom: [
          {
            type: "slider",
            show: false,
			startValue: 0,
			endValue: 4,
            xAxisIndex: [0],
          }, 
        ],

/* 	title: {
		text: '今日单价前五名柱状图',
		left: 'center',
	}, */
	color: ["#2f89cf"],
	grid: {
	  left: "0%",
	  top: "10px",
	  right: "0%",
	  bottom: "4%",
	  containLabel: true
	},
	xAxis: {
	  type: 'category',
	  data: [],
	  axisLabel: {
		color: "rgba(255,255,255,.6)",
		fontSize: "12"
	  },
 //  x轴样式不显示
 axisLine: {
	 show: false
	 // 如果想要设置单独的线条样式 
	 // lineStyle: {
	 //    color: "rgba(255,255,255,.1)",
	 //    width: 1,
	 //    type: "solid"
	}
	},
	yAxis: {
	  type: 'value',
	  axisLabel: {
		color: "rgba(255,255,255,.6)",
		 fontSize: "12"
  },
   // y轴线条样式
   axisLine: {
		lineStyle: {
		   color: "rgba(255,255,255,.1)",
		   // width: 1,
		   // type: "solid"
		}
  },
   // y 轴分隔线样式
  splitLine: {
	  lineStyle: {
		 color: "rgba(255,255,255,.1)"
	   }
  }
	},
	series: [
	  {
		data: [],
		type: 'bar',
		label: {
			show: true
		},
		showBackground: true,
		backgroundStyle: {
		  color: 'rgba(180, 180, 180, 0.2)'
		}
	  }
	]
  };
function get_l1_data() {
	
	$.ajax({
		url:"/l1",
		success: function(data) {
			option_left1.xAxis.data = data.name
			option_left1.series[0].data = data.price
			if (option_left1.dataZoom[0].endValue ==data.length - 1) {
				option_left1.dataZoom[0].endValue = 4;
				option_left1.dataZoom[0].startValue = 0;
			  }
			  else {
				option_left1.dataZoom[0].endValue = option_left1.dataZoom[0].endValue + 1;
				option_left1.dataZoom[0].startValue = option_left1.dataZoom[0].startValue + 1;
			  }
			
			ec_left1.setOption(option_left1);
			
		},
		error: function(xhr, type, errorThrown) {
			
		}
	})
}
get_l1_data()
setInterval(get_l1_data,2000)

ec_left1.setOption(option_left1);
window.addEventListener("resize", function () {
	ec_left1.resize(); //图表自适应的一个方法
  });
